<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-size: 16px;
        }
        .pre {
            white-space:pre;
        }
        #con{
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div>文字测试</div>
    <div>
        <h1> 单个空格宽度</h1>
        <div>
            <span><span> </span></span>
        </div>
    </div>
      <div>
        <h1> 两个个空格宽度</h1>
        <div>
            <span><span>  </span></span>
        </div>
    </div>
       <div>
        <h1> 两个个空格宽度</h1>
        <div>
            <span><span> </span><span> </span></span>
        </div>
    </div>
         <div>
        <h1> 两个个空格宽度</h1>
        <div >
            <span id="con"></span>
        </div>
    </div>
</body>
<script>
    const con = document.querySelector('#con')
    const emptyspan = `<span> </span><span> </span>`
    const texts = "    巨灵神厉声高叫道：“那泼猴！你认得我么？”大圣听言，急问道：“你是那路毛神，老孙不曾会你，你快报名来。”巨灵神道：“我把你那欺心的猢狲！你是认不得我！我乃高上神灵托塔李天王部下先锋，巨灵天将！今奉玉帝圣旨，到此收降你。你快卸了装束，归顺天恩，免得这满山诸畜遭诛；若道半个‘不’字，教你顷刻化为齑粉！”猴王听说，心中大怒道：“泼毛神，休夸大口，少弄长舌！我本待一棒打死你，恐无人去报信；且留你性命，快早回天，对玉皇说：他甚不用贤！老孙有无穷的本事，为何教我替他养马？你看我这旌旗上字号。若依此字号升官，我就不动刀兵，自然的天地清泰；如若不依时间，就打上灵霄宝殿，教他龙床定坐不成！”这巨灵神闻此言，急睁睛迎风观看，果见门外竖一高竿，竿上有旌旗一面，上写着“齐天大圣”四大字。巨灵神冷笑三声道：“这泼猴，这等不知人事，辄敢无状，你就要做齐天大圣！好好的吃吾一斧！”劈头就砍将去。那猴王正是会家不忙，将金箍棒应手相迎。这一场好杀："
    const span = texts.split('').map((item) => {
        return `<span class="pre" >${item}</span>`
    }).join('')
    con.innerHTML = span
</script>
</html>